import React, { Component } from 'react'
import HeaderBar from '../headerBar/HeaderBar'
import { get } from '../../utils/http'
import ListCart from '../listCart/ListCart'
import IndexComp from '../mainList/index/index'
import CartoonComp from '../mainList/cartoon/cartoon'
import YarpenComp from '../mainList/yarpen/yarpen'

export default class index extends Component {

    constructor() {
        super();
        this.state = {
            cartList: [],
            indexList:[],
            compIndex: 0
        }
    }

    getComp(index) {
        console.log(index)
        this.setState({
            compIndex: index.index
        })
    }

    render() {
        return (
            <>
                <HeaderBar></HeaderBar>
                <ListCart data={this.state.cartList} comp={this.getComp.bind(this)}></ListCart>
                {(() => {
                    switch (this.state.compIndex) {
                        case 0:
                            return <IndexComp list={this.state.indexList}></IndexComp>;
                        case 1:
                            return <CartoonComp></CartoonComp>;
                        case 2:
                            return <YarpenComp></YarpenComp>;
                        default: return null;
                    }
                }
                )()}
            </>
        )

    }
    async getCart() {
        let result = await get('/api/cartlist')

        this.setState({
            cartList: result.data.data.list
        })
    }

    async getIndexList(){
        let result = await get('/api/indexlist')
        this.setState({
            indexList: result.data.data.list
        })
    }

    async componentDidMount() {
        this.getCart();
        this.getIndexList();
    }
}
